<script lang="ts" setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router';

  import { ElMenu, ElSubMenu, ElMenuItem } from 'element-plus'

  const router = useRouter();

  const activeIndex = ref('1')
  const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
</script>


<template>
  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false" @select="handleSelect"
    style="background-color: #324057;">
    <!-- <el-menu-item index="0">
    </el-menu-item> -->
    <div class="a-logo">

      <img src="../assets/alogo.png" alt="Element logo" />
      <span>CRYPTOMANOR</span>
    </div>
    <div class="flex-grow" />
    <el-menu-item index="1" @click="router.push('/index')">官网</el-menu-item>
    <el-sub-menu index="2">
      <template #title>admin</template>
      <el-menu-item index="2-1">个人中心</el-menu-item>
      <el-menu-item index="2-2">退出登录</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<style lang="scss">
  .a-logo {
    display: flex;
    align-items: center;

    img {
      width: 50px;
      padding: 5px;
      margin-left: 10px;
    }

    span {
      color: #fff;
      font-size: 24px;
      font-weight: 600;
      padding-top: 6px;
    }
  }

  .el-menu-demo {
    background-color: #324057;

  }

  .flex-grow {
    flex-grow: 1;
  }

  .el-menu--horizontal>.el-menu-item,
  .el-menu--horizontal>.el-sub-menu .el-sub-menu__title {
    border-bottom: 2px solid var(--el-menu-active-color);
    color: var(--el-menu-active-color) !important;
  }
</style>